<template>
  <div class="cateitem">
    <div class="cate_hander">
      <h1 class="cate_title">品类管理</h1>
      <el-button @click="addcate" type="primary" icon="el-icon-plus">添加品类</el-button>
    </div>
    <div>当前商品分类ID:{{this.$route.query.data}}</div>
    <div class="cateitem_content">
      <el-table
        :data="cateitemList.slice((currpage - 1) * pagesize, currpage * pagesize)"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="品类ID" width="180"></el-table-column>
        <el-table-column prop="name" label="品类名称" width="680"></el-table-column>
        <el-table-column prop="status" label="操作">
          <template slot-scope="scope">
            <a @click.prevent="modifyname(scope.row)">修改名称</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :total="cateitemList.length"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { categoryItem, category,categoryList, setcategory } from "../../request/http";
export default {
  data() {
    return {
      cateitemList: [],
      pagesize: 10,
      currpage: 1
    };
  },
  mounted() {
    // category({categoryId:this.$route.query.data}).then(res=>{
    //     console.log(res)
    //     this.cateitemList = res.data.data;
    // })
    categoryList({categoryId:this.$route.query.data}).then(res=>{
        console.log(res)
        this.cateitemList = res.data.data;
    })
  },
  methods: {
    addcate() {
      this.$router.push("/product/index/addcate");
    },
    modifyname(v) {
      this.$prompt('请输入新的子品类名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue:v.name
        }).then(({ value }) => {
          console.log(value)
          setcategory({categoryId:v.id,categoryName:value}).then(res=>{
            console.log(res)
            category({categoryId:this.$route.query.data}).then(res1=>{
              this.cateitemList = res1.data.data;

            })
          })
          this.$message({
            type: 'success',
            message: '修改成功 '
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });       
        });

    },
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
    handleSizeChange(psize) {
      this.pagesize = psize;
    }
  }
};
</script>


<style lang="scss" scoped>
@import "@/Scss/index.scss";
.cateitem_content {
  @include Wm(95%);
}
.cate_hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cate_title {
  display: inline-block;
  font-weight: normal;
}
.cateitem {
  @include Wm(95%);
}
</style>